<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar (touchstart)="closeModal($event)" (click)="closeModal($event)" class="music-close-main" *ngIf="!isIos">
    <ion-item lines="none" class="music-close-control">
      <ion-label class="ion-no-margin ion-text-center">
        <div class="close-control"></div>
      </ion-label>
    </ion-item>
  </ion-toolbar>
  <ion-toolbar class="music-close-main" (click)="closeModal($event)" *ngIf="isIos">
    <ion-item lines="none" class="music-close-control">
      <ion-label class="ion-no-margin ion-text-center">
        <div class="close-control"></div>
      </ion-label>
    </ion-item>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-row class="ion-justify-content-center">
    <ion-col size="11" sizeSm="8" sizeMd="6">
      <ion-card class="music-card">
        <ion-card-header class="ion-text-center">
          <img [src]="music.image" [ngClass]="{'mini': !music.isPlaying}" />
        </ion-card-header>

        <ion-list lines="none" class="ion-padding-top music-progress-container">
          <ion-item lines="none" class="music-progress">
            <ion-range min="0" max="100" color="primary" [formControl]="progress" (touchend)="progressChanged()"
              (mouseup)="progressChanged()" class="progress-range">
            </ion-range>
          </ion-item>
          <ion-item lines="none" class="music-timing">
            <ion-text slot="start" color="medium" class="ion-no-margin" style="font-size: 12px;">
              {{progressTime}}
            </ion-text>
            <ion-text slot="end" color="medium" class="ion-no-margin" style="font-size: 12px;">
              {{progressTimeEnding}}
            </ion-text>
          </ion-item>
        </ion-list>

        <ion-card-content class="ion-no-padding ion-padding-top ion-text-center">
          <p style="padding-top: 8px;">
            <ion-text slot="end" color="dark" style="font-size: 20px;font-weight: bold;">
              {{music.song}}
            </ion-text>
          </p>
          <p class="ion-no-margin">
            <ion-text slot="end" color="primary" style="font-size: 14px;">
              {{music.author}}
            </ion-text>
          </p>

          <ion-list lines="none" class="music-value-control-container">
            <ion-item lines="none" class="music-value-control-item">
              <ion-range min="0" max="100" color="medium" [formControl]="volume"
                class="ion-no-margin ion-no-padding ion-padding-top" (touchend)="volumeChanged()"
                (mouseup)="volumeChanged()">
                <ion-icon size="small" slot="start" name="volume-off" color="medium"></ion-icon>
                <ion-icon slot="end" name="volume-high" color="medium"></ion-icon>
              </ion-range>
            </ion-item>
          </ion-list>

          <ion-item lines="none" class="music-controls ion-padding-top">
            <ion-buttons slot="start" class="ion-no-margin">
              <ion-button color="dark" fill="clear" size="small" class="ion-no-margin" style="--padding-start: 0px;">
                <ion-icon slot="icon-only" name="download-outline"></ion-icon>
              </ion-button>
            </ion-buttons>

            <p class="ion-no-margin ion-text-center" style="width: 100%;">
              <ion-button color="dark" fill="clear" size="large" style="--padding-start: 0px;">
                <ion-icon slot="icon-only" name="play-back"></ion-icon>
              </ion-button>
              <ion-button color="dark" fill="clear" class="button-largest"
                style="--padding-start: 0px;--padding-end: 0px;" (click)="togglePlayer()">
                <ion-icon slot="icon-only" [name]="music.isPlaying ? 'pause' : 'play'"></ion-icon>
              </ion-button>
              <ion-button color="dark" fill="clear" size="large" style="--padding-end: 0px;">
                <ion-icon slot="icon-only" name="play-forward"></ion-icon>
              </ion-button>
            </p>

            <ion-buttons slot="end" class="ion-no-margin">
              <ion-button color="dark" fill="clear" size="small" class="ion-no-margin" style="--padding-end: 0px;">
                <ion-icon slot="icon-only" ios="ellipsis-horizontal-outline" md="ellipsis-vertical-outline"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>
<ion-footer class="music-footer">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button color="medium">
        <ion-icon slot="icon-only" name="shuffle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-buttons slot="end">
      <ion-button [color]="music.repeat ? 'primary' : 'medium'" (click)="repeat(music.repeat)">
        <ion-icon slot="icon-only" name="repeat-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>